<template>
  <div class="page">
		<van-nav-bar
			:fixed="true" 
			:placeholder="true"
			:border="false"
			:title="title"
			left-arrow
			@click-left="$router.goBack()"
		></van-nav-bar>
		<div class="content">
			<van-address-edit
			  :area-list="areaList"
			  show-postal
			  show-delete
				:address-info="addrInfo"
			  show-set-default
			  show-search-result
			  :search-result="searchResult"
			  :area-columns-placeholder="['请选择', '请选择', '请选择']"
			  @save="onSave"
			  @delete="onDelete"
			/>
		</div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data';
export default {
  data () {
    return {
			title: '修改地址',
			areaList,
			addrInfo: {},
			searchResult: [],
    }
  },
  computed: {

  },
  methods: {
		onSave(res) {
			console.log(res);
		},
		onDelete() {
			this.$toast('已删除');
			setTimeout(()=>{
				this.$router.goBack()
			},2000)
		}
  },
  mounted () {
		console.log(this.$route.query.data)
		this.addrInfo = this.$route.query.data
  }
}
</script>

<style scoped lang="scss">
@import '~styles/theme';
	/deep/ .van-nav-bar{
		.van-icon{
			color: #333;
			font-size: 20px;
		}
	}
	/deep/ .van-address-edit{
		.van-button--danger{
			background-color: $theme_color;
			border-color: $theme_color;
			.van-button__text{
				color: #fff;
				font-size: 16px;
			}
		}
	}
	/deep/ .van-switch{
		width: 40px;
		height: 20px;
		.van-switch__node{
			width: 20px;
			height: 20px;
			top: -0.3px;
		}
	}
	/deep/ .van-switch--on{
		background-color: $theme_color;
	}
	/deep/ .van-switch--on .van-switch__node{
		transform: translateX(20px);
	}
</style>
